<template>
  <div class="container">
    <!-- 抄表分析 -->
    <!-- 抄表考核 -->
    <el-tabs class="tabs-borderCard" v-model="activeName">
      <el-tab-pane label="小区考核" name="area">
        <!-- 查询条件 -->
        <el-form :inline="true" class="tableSearchBox" size="medium">
          <el-form-item label="按月查询：">
            <el-date-picker v-model="tableInfo.area.time" type="month" format="yyyy-MM" value-format="yyyy-MM"
              placeholder="选择日期" :editable="false" :clearable="false"></el-date-picker>
          </el-form-item>
          <el-form-item label="小区：">
            <el-select v-model="tableInfo.area.villageID" clearable filterable :filter-method="villageFilter"
              placeholder="请输入或选择查询小区" @focus="villageFocus">
              <el-option v-for="(item,index) in tableInfo.area.searchList" :key="index" :label="item.villageName"
                :value="item.villageID"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getAreaData">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- /查询条件 -->
        <PagesTable :tableMaxHeight="tableHeight" :tableHeader="tableInfo.area.tableHeader"
          :tableData="tableInfo.area.tableData" :tablePagination="tableInfo.area.tablePagination"
          @pageSize="pageSizeChange" @currentPage="currentPageChange" />
      </el-tab-pane>
      <el-tab-pane label="抄表员考核" name="clerk">
        <!-- 查询条件 -->
        <el-form :inline="true" class="tableSearchBox" size="medium">
          <el-form-item label="按月查询：">
            <el-date-picker v-model="tableInfo.clerk.time" type="month" format="yyyy-MM" value-format="yyyy-MM"
              placeholder="选择日期" :editable="false" :clearable="false"></el-date-picker>
          </el-form-item>
          <el-form-item label="抄表员：">
            <el-select v-model="tableInfo.clerk.suid" clearable placeholder="请选择抄表员">
              <el-option v-for="(item,index) in tableInfo.clerk.searchList" :key="index" :label="item.name"
                :value="item.suid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getClerkData">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- /查询条件 -->
        <PagesTable :tableMaxHeight="tableHeight" :tableHeader="tableInfo.clerk.tableHeader"
          :tableData="tableInfo.clerk.tableData" :tablePagination="tableInfo.clerk.tablePagination"
          @pageSize="pageSizeChange" @currentPage="currentPageChange" />
      </el-tab-pane>
      <el-tab-pane label="抄表率分析" name="rate" lazy>
        <!-- 查询条件 -->
        <el-form :inline="true" class="tableSearchBox" size="medium">
          <el-form-item label="按月查询：">
            <el-date-picker v-model="searchRate.time" type="month" format="yyyy-MM" value-format="yyyy-MM"
              placeholder="选择日期" :editable="false" :clearable="false"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getChartData">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="chart_title">{{chartTitle}}</div>
        <el-row>
          <el-col :span="16">
            <div class="echarts">
              <v-chart ref="chart1" :options="chartOption" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="echarts">
              <v-chart ref="chart2" :options="chartOption2" />
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable,
    },
    data() {
      return {
        tableHeight: "",
        activeName: "area",
        villageListCopy: [{
            villageName: "新华巷",
            villageID: 28
          },
          {
            villageName: "朝阳路东",
            villageID: 29
          },
          {
            villageName: "朝阳路西",
            villageID: 32
          },
          {
            villageName: "党校后",
            villageID: 33
          },
          {
            villageName: "鸳鸯楼",
            villageID: 34
          },
          {
            villageName: "人大单元楼",
            villageID: 35
          },
          {
            villageName: "老干部单元楼",
            villageID: 36
          },
          {
            villageName: "水泉崖",
            villageID: 38
          },
          {
            villageName: "民政局宿舍",
            villageID: 40
          },
          {
            villageName: "总表（吴）",
            villageID: 41
          },
          {
            villageName: "富康家园",
            villageID: 42
          },
          {
            villageName: "教委单元楼",
            villageID: 45
          },
          {
            villageName: "德和盛嘉园",
            villageID: 95
          }
        ],
        tableInfo: {
          clerk: {
            suid: "",
            time: new Date().format("yyyy-MM"),
            searchList: [{
                name: "白明常"
              },
              {
                name: "吴春德"
              },
              {
                name: "田建功"
              },
            ],
            tableHeader: [{
                name: "抄表员",
                mark: "readerName",
                minWidth: "90",
              },
              {
                name: "应抄表数",
                mark: "total",
                minWidth: "90",
              },
              {
                name: "实抄表数",
                mark: "readCount",
                minWidth: "90",
              },
              {
                name: "待抄表数",
                mark: "noReadCount",
                minWidth: "90",
              },
              {
                name: "抄表率（%）",
                mark: "readPercentage",
                minWidth: "90",
              },
              // {
              //   name: "抄表水量",
              //   mark: "currValue",
              //   minWidth: "90"
              // },
              // {
              //   name: "抄表金额",
              //   mark: "currValue",
              //   minWidth: "90"
              // }
            ],
            tablePagination: {
              show: true,
              current: 1,
              size: 10,
              total: 3,
            },
            tableData: [],
            tableDataAll: [{
              readerName: "白明常",
              total: "270",
              readCount: "230",
              noReadCount: "40",
              readPercentage: "85.2"
            }, {
              readerName: "吴春德",
              total: "423",
              readCount: "300",
              noReadCount: "123",
              readPercentage: "70.9"
            }, {
              readerName: "田建功",
              total: "352",
              readCount: "254",
              noReadCount: "98",
              readPercentage: "72.2"
            }, ],
          },
          area: {
            villageID: "",
            time: new Date().format("yyyy-MM"),
            searchList: [{
                villageName: "新华巷",
                villageID: 28
              },
              {
                villageName: "朝阳路东",
                villageID: 29
              },
              {
                villageName: "朝阳路西",
                villageID: 32
              },
              {
                villageName: "党校后",
                villageID: 33
              },
              {
                villageName: "鸳鸯楼",
                villageID: 34
              },
              {
                villageName: "人大单元楼",
                villageID: 35
              },
              {
                villageName: "老干部单元楼",
                villageID: 36
              },
              {
                villageName: "水泉崖",
                villageID: 38
              },
              {
                villageName: "民政局宿舍",
                villageID: 40
              },
              {
                villageName: "总表（吴）",
                villageID: 41
              },
              {
                villageName: "富康家园",
                villageID: 42
              },
              {
                villageName: "教委单元楼",
                villageID: 45
              },
              {
                villageName: "德和盛嘉园",
                villageID: 95
              }
            ],
            tableHeader: [{
                name: "小区",
                mark: "villageName",
                minWidth: "90",
              },
              {
                name: "应抄表数",
                mark: "total",
                minWidth: "90",
              },
              {
                name: "实抄表数",
                mark: "readCount",
                minWidth: "90",
              },
              {
                name: "待抄表数",
                mark: "noReadCount",
                minWidth: "90",
              },
              {
                name: "抄表率（%）",
                mark: "readPercentage",
                minWidth: "90",
              },
            ],
            tablePagination: {
              show: true,
              current: 1,
              size: 10,
              total: 6,
            },
            tableData: [],
            tableDataAll: [{
              villageName: "新华巷",
              total: "74",
              readCount: "58",
              noReadCount: "16",
              readPercentage: "78.4",
            }, {
              villageName: "朝阳路东",
              total: "85",
              readCount: "80",
              noReadCount: "5",
              readPercentage: "94.1",
            }, {
              villageName: "朝阳路西",
              total: "105",
              readCount: "70",
              noReadCount: "35",
              readPercentage: "66.7",
            }, {
              villageName: "党校后",
              total: "80",
              readCount: "68",
              noReadCount: "12",
              readPercentage: "85",
            }, {
              villageName: "鸳鸯楼",
              total: "75",
              readCount: "60",
              noReadCount: "15",
              readPercentage: "80",
            }, {
              villageName: "人大单元楼",
              total: "65",
              readCount: "52",
              noReadCount: "13",
              readPercentage: "80",
            }],
          },
        },
        searchRate: {
          time: new Date().format("yyyy-MM")
        },
        chartTitle: "抄表分析",
        chartOption: {
          color: ["#3aa1ff", "#de656a", "#4ecb73", "#ffa000", "#fbd437"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {
              var tar;
              if (params[1].value !== "-") {
                tar = params[1];
              } else {
                tar = params[2];
              }
              return tar.name + " : " + tar.value;
            },
          },
          grid: {
            left: "3%",
            right: 25,
            top: 20,
            bottom: 10,
            containLabel: true,
          },
          yAxis: {
            type: "category",
            data: ["抄表数", "已抄表", "未抄表"],
          },
          xAxis: {
            type: "value",
          },
          series: [{
              name: "",
              type: "bar",
              stack: "总量",
              itemStyle: {
                barBorderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },
              emphasis: {
                itemStyle: {
                  barBorderColor: "rgba(0,0,0,0)",
                  color: "rgba(0,0,0,0)",
                },
              },
              barWidth: "50%",
              data: [0, 0, 0],
            },
            {
              name: "",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "right",
              },
              data: ["-", 100, 20],
            },
            {
              name: "",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "right",
              },
              data: [120, "-", "-"],
            },
          ],
        },
        chartOption2: {
          color: ["#4ecb73", "#ffa000", "#fbd437"],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            orient: "vertical",
            left: "right",
            data: ["已抄表", "未抄表"],
          },
          series: [{
            name: "抄表分析",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [{
                value: 100,
                name: "已抄表"
              },
              {
                value: 20,
                name: "未抄表"
              },
            ],
          }, ],
        },
      };
    },
    mounted() {
      const self = this;
      // self.getVillageList();
      // self.getMeterReaderList();
      self.getAreaData();
      self.getClerkData();
      // self.getChartData();
      self.echartsResize(self.$refs);
    },
    beforeDestroy() {},
    created() {
      var self = this;
      var height = $(document).height() - 230 - 70 - 50;
      self.tableHeight = height + "";
    },
    methods: {
      getVillageList() {
        //小区列表
        const self = this;
        var param = {
          types: "village",
        };
        self.$axios.post("/service/bsSelectListGet", param).then((res) => {
          if (res.data.status === "success") {
            var tmp = res.data.res;
            //小区
            self.tableInfo.area.searchList = tmp.village;
            //保留数据源
            self.villageListCopy = Object.assign(tmp.village);
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      //小区搜索
      villageFilter(txt) {
        //对绑定数据赋值
        this.tableInfo.area.searchList = this.villageListCopy.filter((item) => {
          if (
            item.villageName.indexOf(txt) !== -1 ||
            item.sx.indexOf(txt) !== -1 ||
            item.qp.indexOf(txt) !== -1
          ) {
            return true;
          }
        });
      },
      //小区列表还原（当 input 获得焦点时触发）
      villageFocus() {
        this.tableInfo.area.searchList = this.villageListCopy;
      },
      getMeterReaderList() {
        //抄表员列表
        const self = this;
        var param = {
          rid: 3,
        };
        self.$axios.post("/service/bsSysuserInfoGet", param).then((res) => {
          if (res.data.status === "success") {
            if (res.data.res != "") {
              self.tableInfo.clerk.searchList = res.data.res;
            }
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      getChartData() {
        //获取图表数据
        const self = this;
        let param = {
          readMonth: self.searchRate.time,
        };
        self.$axios.post("/service/bsMeterReadingCountGet", param).then((res) => {
          if (res.data.status === "success") {
            self.chartTitle = param.readMonth + " 抄表分析";
            let noReadCount = res.data.res.totalCount - res.data.res.readCount;
            self.chartOption.series[0].data = [0, noReadCount, 0];
            self.chartOption.series[1].data = [
              "-",
              res.data.res.readCount,
              noReadCount,
            ];
            self.chartOption.series[2].data = [res.data.res.totalCount, "-", "-"];
            self.chartOption2.series[0].data = [{
                value: res.data.res.readCount,
                name: "已抄表"
              },
              {
                value: noReadCount,
                name: "未抄表"
              },
            ];
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      getClerkData() {
        //抄表员考核
        const self = this;
        self.tableInfo.clerk.tablePagination.size = 10;
        self.tableInfo.clerk.tablePagination.current = 1;
        let param = {
          suid: self.tableInfo.clerk.suid,
          readMonth: self.tableInfo.clerk.time,
        };
        //readMonth必选
        // self.$axios
        //   .post("/service/bsMeterReadingCountGetA", param)
        //   .then((res) => {
        //     if (res.data.status === "success") {
        //       if (param.suid) {
        //         let Vcurrent = self.tableInfo.clerk.searchList.find(
        //           (currentValue) => currentValue.suid === param.suid
        //         );
        //         self.tableInfo.clerk.tableData = [];
        //         res.data.res.readerName = Vcurrent.name;
        //         self.tableInfo.clerk.tableData.push(res.data.res);
        //         self.tableInfo.clerk.tablePagination.total = 1;
        //       } else {
        //         self.tableInfo.clerk.tableDataAll = res.data.res;
        //         self.tableInfo.clerk.tablePagination.total =
        //           self.tableInfo.clerk.tableDataAll.length;
        self.handleTableData("clerk");
        //     }
        //   } else {
        //     self.$message.error(res.data.res);
        //   }
        // });
      },
      getAreaData() {
        //小区考核
        const self = this;
        self.tableInfo.area.tablePagination.size = 10;
        self.tableInfo.area.tablePagination.current = 1;
        let param = {
          villageID: self.tableInfo.area.villageID,
          readMonth: self.tableInfo.area.time,
        };
        // self.$axios
        //   .post("/service/bsMeterReadingCountGetB", param)
        //   .then((res) => {
        //     if (res.data.status === "success") {
        //       if (param.villageID) {
        //         let Vcurrent = self.tableInfo.area.searchList.find(
        //           (currentValue) => currentValue.villageID === param.villageID
        //         );
        //         self.tableInfo.area.tableData = [];
        //         res.data.res.villageName = Vcurrent.villageName;
        //         self.tableInfo.area.tableData.push(res.data.res);
        //         self.tableInfo.area.tablePagination.total = 1;
        //       } else {
        //         self.tableInfo.area.tableDataAll = res.data.res;
        //         self.tableInfo.area.tablePagination.total =
        //           self.tableInfo.area.tableDataAll.length;
        self.handleTableData("area");
        //     }
        //   } else {
        //     self.$message.error(res.data.res);
        //   }
        // });
      },
      handleTableData(activeName) {
        const self = this;
        let key;
        if (activeName) {
          key = activeName;
        } else {
          key = self.activeName;
        }
        self.tableInfo[key].tableData = [];
        let i =
          (self.tableInfo[key].tablePagination.current - 1) *
          self.tableInfo[key].tablePagination.size;
        let j =
          self.tableInfo[key].tablePagination.current *
          self.tableInfo[key].tablePagination.size;
        if (j > self.tableInfo[key].tablePagination.total) {
          j = self.tableInfo[key].tablePagination.total;
        }
        for (i; i < j; i++) {
          self.tableInfo[key].tableData.push(self.tableInfo[key].tableDataAll[i]);
        }
      },
      pageSizeChange(data) {
        this.tableInfo[this.activeName].tablePagination.size = data;
        this.handleTableData();
      },
      currentPageChange(data) {
        this.tableInfo[this.activeName].tablePagination.current = data;
        this.handleTableData();
      },
    },
  };
</script>
<style lang="scss" scoped>
  .chart_title {
    text-align: center;
    color: #303133;
    font-size: 16px;
    line-height: 48px;
  }

  .echarts {
    width: 100%;
    height: 40vh;
    min-height: 280px;
    // margin: 20px auto;
  }
</style>